
<!DOCTYPE HTML>

<html>

<head>
	<meta charset="utf-8">
	<title>制作HTML5音频播放器（HTML5 Audio Player With playlist） - 前端艺术</title>
	<meta name="author" content="Nicholas">

	
	<meta name="description" content="制作HTML5音频播放器（HTML5 Audio Player With Playlist） 原文：http://www.script-tutorials.com/html5-audio-player-with-playlist/ 译者：晋文格墨 也许对于很多人来说这是人生中第一次制作音频播放器 &hellip;">
	

  <!-- http://t.co/dKP3o1e -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">

	<link href="/atom.xml" rel="alternate" title="前端艺术" type="application/atom+xml">
	
	<link rel="canonical" href="http://xiebaochun.github.io/blog/2013/10/30/html5-audio-player-with-playlist/">
	<link href="/favicon.png" rel="shortcut icon">
	<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
	<link href="/stylesheets/font-awesome.min.css" media="screen, projection" rel="stylesheet" type="text/css">
	<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

</head>


<body>
	<div class="container">
		<div class="left-col">
			<div class="intrude-less">
			<header id="header" class="inner"><div class="profilepic">
<!--the weather pugin-->
    <script defer src="http://julying.com/lab/weather/v3/jquery.weather.build.min.js?parentbox=body&moveArea=all&zIndex=1&move=1&drag=1&autoDrop=1&styleSize=big&style=_random&area=client&city=%E5%8C%97%E4%BA%AC"></script>
	<script src="/javascripts/md5.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.profilepic').append("<img src='https://si0.twimg.com/profile_images/378800000316979686/061b0d73fe1b9cc3a643a68bcb077161.jpeg' alt='Profile Picture' style='width: 160px;' />");
		});
	</script>
</div>
<hgroup>
  <h1><a href="/">前端艺术</a></h1>
  
    <h2>one blog for games.</h2>
  
</hgroup>

<nav id="main-nav"><ul class="main-navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/blog/archives">Archives</a></li>
  <li><a href="http://www.juerry.com/index.html">my lab</a></li>
</ul>


<section class="aboutme">
  <p>
    专注于移动开发
  </p>
</section>
</nav>
<nav id="sub-nav">
	<div class="social">
		
		
		
		<a class="twitter" href="http://twitter.com/xiebaochun" title="Twitter">Twitter</a>
		
		
		<a class="github" href="https://github.com/xiebaochun" title="GitHub">GitHub</a>
		
		
		
		
		
		
		
		
		<a class="rss" href="/atom.xml" title="RSS">RSS</a>
		
	</div>
</nav>
<section>
  <h1>Categories</h1>
    <ul id="category-list"><li><a href='/blog/categories/ios/'>ios (2)</a></li><li><a href='/blog/categories/other/'>other (14)</a></li><li><a href='/blog/categories/web/'>web (23)</a></li></ul>
</section>

</header>				
			</div>
		</div>	
		<div class="mid-col">
			
				
			
			<div class="mid-col-container">
				<div id="content" class="inner"><article class="post" itemscope itemtype="http://schema.org/BlogPosting">
	<h1 class="title" itemprop="name">制作HTML5音频播放器（HTML5 Audio Player With Playlist）</h1>
	<div class="entry-content" itemprop="articleBody"><p><img src="http://www.script-tutorials.com/demos/363/thumb.png" alt="" /></p>

<p>原文：<a href="http://www.script-tutorials.com/html5-audio-player-with-playlist/">http://www.script-tutorials.com/html5-audio-player-with-playlist/</a></p>

<p>译者：<a href="http://xiebaochun.github.io/">晋文格墨</a></p>

<!--more-->

<p>也许对于很多人来说这是人生中第一次制作音频播放器。通常你会选择一个可用的播放器，一般是flash播放器。但是你也许已经发现，flash播放器在移动设备（如iPhone/Android)上不能很好的工作。今天，我将教你如何使用HTML5技术制作你自己的音频播放器。这个播放器包含了以下元素：title(标题），author(作家），cover（封面），基本的控制（播放/暂停，前进/后退），两个滑动条（jQuery UI sliders）:音量滑动条和一个歌曲跟踪器(song tracker)，还有一个歌曲列表。</p>

<h3 id="section">预览</h3>

<p><a href="http://www.script-tutorials.com/demos/363/">在线演示</a></p>

<p><a href="http://www.script-tutorials.com/demos/363/source.zip">下载例子</a></p>

<p>我相信你应该知道如何使用<audio>这个标准的标签来创建一个简单的音频播放器。在本教程里，我们会使用一个特殊的标签，我将使用所有所需的控制元素来创建我们的播放器。我们将会使用javascript写好的一个音频元素的事件处理来控制这个播放器。</audio></p>

<h3 id="html">步骤1，HTML</h3>

<p>像往常一样，我们需要在head部分包含几个文件。</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8" /&gt;
&lt;meta name="author" content="Script Tutorials" /&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /&gt;
&lt;title&gt;HTML5 Audio player with playlist | Script Tutorials&lt;/title&gt;

&lt;!-- add styles and scripts --&gt;
&lt;link href="css/styles.css" rel="stylesheet" type="text/css" /&gt;
&lt;script type="text/javascript" src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
&lt;/head&gt;
</code></pre>

<p>现在看一下播放器的标签。</p>

<pre><code>&lt;div class="player"&gt;
&lt;div class="pl"&gt;&lt;/div&gt;
&lt;div class="title"&gt;&lt;/div&gt;
&lt;div class="artist"&gt;&lt;/div&gt;
&lt;div class="cover"&gt;&lt;/div&gt;
&lt;div class="controls"&gt;
&lt;div class="play"&gt;&lt;/div&gt;
&lt;div class="pause"&gt;&lt;/div&gt;
&lt;div class="rew"&gt;&lt;/div&gt;
&lt;div class="fwd"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="volume"&gt;&lt;/div&gt;
&lt;div class="tracker"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;ul class="playlist hidden"&gt;
&lt;li audiourl="01.mp3" cover="cover1.jpg" artist="Artist 1"&gt;01.mp3&lt;/li&gt;
&lt;li audiourl="02.mp3" cover="cover2.jpg" artist="Artist 2"&gt;02.mp3&lt;/li&gt;
&lt;li audiourl="03.mp3" cover="cover3.jpg" artist="Artist 3"&gt;03.mp3&lt;/li&gt;
&lt;li audiourl="04.mp3" cover="cover4.jpg" artist="Artist 4"&gt;04.mp3&lt;/li&gt;
&lt;li audiourl="05.mp3" cover="cover5.jpg" artist="Artist 5"&gt;05.mp3&lt;/li&gt;
&lt;li audiourl="06.mp3" cover="cover6.jpg" artist="Artist 6"&gt;06.mp3&lt;/li&gt;
&lt;li audiourl="07.mp3" cover="cover7.jpg" artist="Artist 7"&gt;07.mp3&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<h3 id="css">步骤2.CSS</h3>

<p>现在可以将赤裸裸的HTML5文件变成漂亮的播放器了，为此，我们需要为每个元素定义样式。</p>

<p>css/styles.css</p>

<pre><code>.example {
margin: 50px auto 0;
width: 400px;
}
.player {
background: transparent url("../images/spr.png") no-repeat scroll center top;
height: 162px;
position: relative;
width: 326px;
z-index: 2;
}
.title, .artist {
font-family: verdana;
left: 167px;
position: absolute;

-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.title {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
top: 23px;
}
.artist {
color: #EEEEEE;
font-size: 12px;
top: 40px;
}
.pl {
background: transparent url("../images/spr.png") no-repeat scroll -274px -175px;
cursor: pointer;
height: 34px;
left: 270px;
position: absolute;
top: 20px;
width: 32px;
}
.pl:hover {
top: 21px;
}
.cover {
background: transparent url(../data/cover1.jpg) no-repeat scroll center top;
border-radius: 5px 5px 5px 5px;
height: 94px;
left: 20px;
position: absolute;
top: 20px;
width: 94px;
}
.controls {
cursor: pointer;
height: 23px;
left: 167px;
position: absolute;
top: 65px;
width: 138px;
}
.controls .play, .controls .pause, .controls .rew, .controls .fwd {
background: transparent url("../images/spr.png") no-repeat scroll 0 0;
float: left;
height: 100%;
width: 33%;
}
.controls .play {
background-position: -8px -171px;
}
.controls .pause {
background-position: -8px -198px;
display: none;
}
.controls .rew {
background-position: -54px -171px;
}
.controls .fwd {
background-position: -100px -171px;
}
.controls .play:hover {
background-position: -8px -170px;
}
.controls .pause:hover {
background-position: -8px -197px;
}
.controls .rew:hover {
background-position: -54px -170px;
}
.controls .fwd:hover {
background-position: -100px -170px;
}
.hidden {
display: none;
}
.controls .visible {
display: block;
}
.volume {
height: 11px;
left: 186px;
position: absolute;
top: 96px;
width: 112px;
}
.tracker {
height: 15px;
left: 20px;
position: absolute;
top: 126px;
width: 285px;
}
.ui-slider-range {
background: transparent url("../images/spr.png") no-repeat scroll 5px -222px;
height: 100%;
position: absolute;
top: 0;
}
.ui-slider-handle {
cursor: pointer;
height: 10px;
margin-left: -5px;
position: absolute;
top: 2px;
width: 10px;
z-index: 2;
}
.volume .ui-slider-handle {
background: url("../images/spr.png") no-repeat scroll -201px -188px rgba(0, 0, 0, 0);
height: 13px;
width: 13px;
}
.playlist {
background-color: #333333;
border-radius: 5px 5px 5px 5px;
list-style-type: none;
margin: -10px 0 0 2px;
padding-bottom: 10px;
padding-top: 15px;
position: relative;
width: 326px;
z-index: 1;
}
.playlist li {
color: #EEEEEE;
cursor: pointer;
margin: 0 0 5px 15px;
}
.playlist li.active {
font-weight: bold;
}
</code></pre>

<h3 id="javascript">步骤3.JavaScript</h3>

<p>现在这个漂亮的播放器还不能做任何事情-不可用的状态。为了让其能正常工作，你需要为其添加一些事件和方法。首先，我们需要初始化几个变量。</p>

<p>js/main.js</p>

<pre><code>// inner variables
var song;
var tracker = $('.tracker');
var volume = $('.volume');

// initialization - first element in playlist
initAudio($('.playlist li:first-child'));

// set volume
song.volume = 0.8;

// initialize the volume slider
volume.slider({
range: 'min',
min: 1,
max: 100,
value: 80,
start: function(event,ui) {},
slide: function(event, ui) {
song.volume = ui.value / 100;
},
stop: function(event,ui) {},
});

// empty tracker slider
tracker.slider({
range: 'min',
min: 0, max: 10,
start: function(event,ui) {},
slide: function(event, ui) {
song.currentTime = ui.value;
},
stop: function(event,ui) {}
});
</code></pre>

<p>然后为控制按钮添加事件处理。play和Pause按钮。</p>

<pre><code>// play click
$('.play').click(function (e) {
e.preventDefault();

playAudio();
});

// pause click
$('.pause').click(function (e) {
e.preventDefault();

stopAudio();
});
</code></pre>

<p>为了切换列表的歌曲，我们需要停止当前播放的歌曲，选择列表里的下一首（或者上一首），并重新初始化我们的Audio元素。Forward/Rewind按钮。</p>

<pre><code>// forward click
$('.fwd').click(function (e) {
e.preventDefault();

stopAudio();

var next = $('.playlist li.active').next();
if (next.length == 0) {
next = $('.playlist li:first-child');
}
initAudio(next);
});

// rewind click
$('.rew').click(function (e) {
e.preventDefault();

stopAudio();

var prev = $('.playlist li.active').prev();
if (prev.length == 0) {
prev = $('.playlist li:last-child');
}
initAudio(prev);
});
</code></pre>

<p>最后，就是一些处理歌曲列表的函数。</p>

<pre><code>// show playlist
$('.pl').click(function (e) {
e.preventDefault();

$('.playlist').fadeIn(300);
});

// playlist elements - click
$('.playlist li').click(function () {
stopAudio();
initAudio($(this));
});
</code></pre>

<h3 id="images">步骤4.Images</h3>

<p>所有的用到的图片（images)都打包到一个叫nav.png的sprite（图片）文件里。</p>

<p><img src="http://www.script-tutorials.com/demos/363/images/spr.png" alt="" /></p>

<p><a href="http://www.script-tutorials.com/demos/363/">在线演示</a></p>

<p><a href="http://www.script-tutorials.com/demos/363/source.zip">下载DEMO</a></p>

<h3 id="section-1">结语：</h3>

<p>这就是今天所有的内容，我们只是制作了一个有趣的音频播放器。感谢您耐心看完本教程，如果你喜欢此文章的话，请使用下面提供的社交平台分享给你所有的朋友吧！</p>
</div>

</article>

	<div class="share">
	<div class="addthis_toolbox addthis_default_style ">
	
	
	<a class="addthis_button_tweet"></a>
	
	
	
	<!-- JiaThis Button BEGIN -->
<div class="jiathis_style_32x32">
	<a class="jiathis_button_qzone"></a>
	<a class="jiathis_button_tsina"></a>
	<a class="jiathis_button_tqq"></a>
	<a class="jiathis_button_weixin"></a>
	<a class="jiathis_button_renren"></a>
	<a href="http://www.jiathis.com/share?uid=1838235" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
	<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript">
var jiathis_config = {data_track_clickback:'true'};
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1371541356556113" charset="utf-8"></script>
<!-- JiaThis Button END -->
<!-- UY BEGIN -->
<div id="uyan_frame"></div>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=1838235"></script>
<!-- UY END -->
	
	<a class="addthis_counter addthis_pill_style"></a>
	</div>
  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid="></script>
</div>


</div>
			</div>
			<footer id="footer" class="inner"><p>
  Copyright &copy; 2014 - Nicholas -
  <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>

Design credit: <a href="http://shashankmehta.in/archive/2012/greyshade.html">Shashank Mehta</a></footer>
			







  <script type="text/javascript">
    (function(){
      var twitterWidgets = document.createElement('script');
      twitterWidgets.type = 'text/javascript';
      twitterWidgets.async = true;
      twitterWidgets.src = '//platform.twitter.com/widgets.js';
      document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
    })();
  </script>





		</div>
	</div>
</body>
</html>
